<template>
  <span v-if="isTips">
    <el-tooltip class="box-item" effect="dark" :content="props.text" placement="top">
      <span class="text_ellipsis">{{ props.text }}</span>
    </el-tooltip>
  </span>
  <span v-else>
    {{ props.text }}
  </span>
</template>

<script setup lang="ts">
const props = defineProps({
  limit: {
    type: Number,
    default: 20,
  },
  text: {
    type: String,
  },
});
const isTips = computed(() => {
  if (props.text && props.text.length) {
    return props.text.length > props.limit;
  }
  return true;
});
</script>

<style scoped></style>
